<template>
  <div>
    <div class="c-bg-white c-mt10">
      <div id="form-content" class="c-fs24 c-fc-xblack" :class="item.type == 17 ? 'c-bg-fa c-pv8 c-mv16' : item.type == 15 ? 'c-ml24 c-mr24' : 'c-pv28 c-ml24 c-mr24'" v-for="(item, index) in formList"
        :key="index" v-if="(item.showForm !== 0 || item.isSkip == 1) && item.isChangeHid != 2">
        <div v-if="item.type != 8 && item.type != 9 && item.type != 11 && item.type != 18" class="" :class="item.type == 6 ? 'c-aligni-start' : 'c-aligni-center'">
          <div class="" v-if="item.type != 9 && item.type != 10 && item.type != 17 && item.type != 15"><span v-if="item.require == 1" class="c-fc-red c-mr6">*</span>{{ item.formIndex + '、' + item.title }}</div>
          <div v-if="item.isWarnInfo == 1" class="c-fs22 c-fc-gray c-mt10" :class="item.require == 1 ? 'c-ml10' : ''">{{ item.warnInfo }}</div>
          <div class="c-w100 c-mt20"
            v-if="item.type != 4 && item.type != 5 && item.type != 6 && item.type != 10 && item.type != 13 && item.type != 14 && item.type != 16 && item.type != 15 && item.type != 17">
            <input :type="item.type == 3 ? 'number' : 'text'" :pattern="item.type == 3 && isIos ? '[0-9]*' : ''" :disabled="isDisabled" v-model="item.value"
              :maxlength="item.type == 12 ? 18 : item.type == 1 || item.type == 2 ? 20 : item.maxLength" :placeholder="'请输入' + item.title"
              class="c-textAlign-l c-fs24 c-bd0 input-style c-br8 c-w100 c-hh76 c-ph20" @focus="inputFocus" @blur="inputBlur(item, index)" @input="inputCheck(item)" />
          </div>
          <div class="c-w100 c-mt20" v-if="item.type == 4">
            <input type="text" :disabled="isDisabled" v-model="item.value" :maxlength="item.maxLength" :placeholder="'请输入' + item.title"
              class="c-textAlign-l c-fs24 c-bd0 input-style c-br8 c-w100 c-hh76 c-ph20" @focus="inputFocus" @blur="inputBlur(item, index)" />
          </div>
          <div class=" c-mt20 c-bd1-mgray c-flex-row input-style c-justify-sb c-pv20 c-fs24 c-ph20" v-if="item.type == 4 && !isSubmitForm && item.isCheckTel == 1">
            <input type="text" v-model="code" name="" @input="code=code.slice(0, 4)" placeholder="请输入验证码" maxlength="4" class="c-br8 bg-fa c-fc-gray c-lh c-bd0 c-w50 needsclick" />
            <span class="c-fs24 c-fc-xblack c-lh36 c-block c-textAlign-c" @click="getYzcode(item.value)">{{ yzText }}</span>
          </div>
          <!-- 性别 -->
          <div class="c-flex-row c-fc-xblack c-w100 c-mt20 c-p" v-else-if="item.type == 5">
            <popup-picker :themeColor="$getThemeColor()" :disabled="isDisabled" class="chooseSex c-w100 input-style c-hh76 c-br8 c-flex-row c-aligni-center c-ph20" title="" @on-change="onSexChange($event, index)"
              :data="sexData" v-model="sex" placeholder="请选择性别" value-text-align="left"></popup-picker>
            <span class="iconfont c-fs18 icon-xiafangxiang c-pa c-p-t24 c-p-r20"></span>
          </div>
          <!-- 地址 -->
          <div class="c-flex-column c-fc-xblack c-w100 c-mt20 c-p" v-else-if="item.type == 6">
            <x-address :themeColor="$getThemeColor()" raw-value v-model="item.value2" @on-shadow-change="changeAddress" title="" @on-hide="onAddressConfim($event, index)" v-if="addressData != ''" :list="addressData"
              placeholder="请选择地址" value-text-align="left" :disabled="isDisabled"
              class="c-textAlign-l c-fs24 c-bd0 c-w100 c-mb10 form-address input-style c-hh76 c-br8 c-flex-row c-aligni-center c-ph20"></x-address>
            <span class="iconfont c-fs18 icon-xiafangxiang c-pa c-p-t24 c-p-r20"></span>
            <input v-if="item.detailType == 1" type="text" v-model="item.value" :disabled="isDisabled" placeholder="详细地址，如街道、楼层、门牌号等"
              class="c-textAlign-l c-fs24 c-bd0 c-w100 input-style c-hh76 c-br8 c-flex-row c-aligni-center c-ph20" @focus="inputFocus" @blur="inputBlur(item, index)" />
          </div>
          <a class="c-flex-row c-fc-xblack c-w100" href="javascript:void(0);" @click="goUrl(item.value.link)" v-else-if="item.type == 10">
            <img :src="$addXossFilter(item.value.image)" class="c-w100 c-h" alt="" />
          </a>
          <!-- 民族 -->
          <div class="c-flex-row c-fc-xblack c-w100 c-mt20 c-p" v-else-if="item.type == 13">
            <popup-picker :themeColor="$getThemeColor()" :disabled="isDisabled" class="chooseSex c-w100 input-style c-hh76 c-br8 c-flex-row c-aligni-center c-ph20" title=""
              @on-change="onNationChange($event, index)" :data="nationData" v-model="nation" placeholder="请选择民族" value-text-align="left"></popup-picker>
            <span class="iconfont c-fs18 icon-xiafangxiang c-pa c-p-t24 c-p-r20"></span>
          </div>
          <!-- 下拉框 -->
          <div class="c-flex-row c-fc-xblack c-w100 c-mt20 form-select c-p" v-else-if="item.type == 14">
            <popup-picker :themeColor="$getThemeColor()" :disabled="isDisabled" class="chooseSex c-w100 input-style c-hh76 c-br8 c-flex-row c-aligni-center c-ph20" title=""
              @on-change="onSelectChange(item, index)" :data="item.seOption" v-model="item.value" placeholder="请选择一个选项" value-text-align="left"></popup-picker>
            <span class="iconfont c-fs18 icon-xiafangxiang c-pa c-p-t24 c-p-r20"></span>
          </div>
          <!-- 文字描述 -->
          <div class="c-w100 c-mt20" v-else-if="item.type == 15">
            <div class="c-fs24 c-lh40 c-br8 c-w100 c-ph20 c-pv20" v-html="item.value"></div>
          </div>
          <!-- 年月日 -->
          <div class="c-flex-column c-fc-xblack c-w100 c-mt20" v-else-if="item.type == 16">
            <group class="c-fs24 c-bd0 c-w100 c-mb10 form-address input-style c-hh76 c-br8 c-flex-row c-aligni-center c-justify-start c-ph20 c-p" v-if="!isDisabled">
              <datetime :themeColor="$getThemeColor()" :disabled="isDisabled" min-year="1900" max-year="2100" v-model="item.value" :start-date="startDate" @on-confirm="confirmTime($event, index)"
                placeholder="年-月-日" value-text-align="left"></datetime>
              <span class="iconfont c-fs18 icon-xiafangxiang c-pa c-p-t24 c-p-r20"></span>
            </group>
            <div class="c-textAlign-l c-fs24 c-bd0 c-w100 c-mb10 form-address input-style c-hh76 c-br8 c-flex-row c-aligni-center c-ph20" :class="item.value ? '' : 'c-fc-sgray'" v-if="isDisabled">
              <div>{{ item.value ? item.value : '年-月-日' }}</div>
              <span class="iconfont c-fs18 icon-xiafangxiang c-pa c-p-t24 c-p-r20"></span>
            </div>
          </div>
        </div>
        <div v-else-if="item.type == 8 || item.type == 9">
          <div class="c-fs24 c-fc-xblack c-wb-ba c-aligni-center" v-if="item.type == 8">
            <span v-if="item.require == 1" class="c-fc-red">*</span><span v-if="item.type == 9"></span>
            {{ item.formIndex + '、' + item.title }}
          </div>
          <div v-if="item.isWarnInfo == 1" class="c-fs22 c-fc-gray c-mt10" :class="item.require == 1 ? 'c-ml10' : ''">{{ item.warnInfo }}</div>
          <ul v-if="item.type == 8" class="c-liststyle-none c-mt20">
            <li v-for="(option, optIndex) in item.option" :key="optIndex" class="c-pr24 c-pl20 c-flex-row c-pv20 c-fs24 c-mh90">
              <!-- 单选 -->
              <div v-if="item.multiple == 0" class="c-flex-row c-aligni-center" @click="chooseRadio(item, index, option, optIndex)">
                <i class="iconfont c-fs26 c-mr16" :class="optIndex === item.optIndex ? 'theme-fc icon-gouxuan1' : 'icon-weigouxuan c-fc-gray'"></i>
                <span>{{ option.key }}</span>
              </div>

              <!-- 多选 -->
              <div v-if="item.multiple == 1" class="c-flex-row c-aligni-center c-w100" @click="checkboxAnswer(option, item.value, item, index, optIndex)">
                <span class="c-mr16 mt2 c-ww24 c-hh24" :class="option.checked ? 'theme-bg' : 'c-bg-white c-bd1-gray'">
                  <i class="iconfont c-fs20 c-fc-white" :class="option.checked ? 'icon-weibiaoti-1 check-trans' : ''"></i>
                </span>
                <span class="c-w100">{{ option.key }}</span>
              </div>
            </li>
            <!--多选单选 -- 其他 -->
            <div class="c-ml60 short-answer-textarea c-pv12 c-ph12 input-style c-br8 chooes-count c-p" v-show="item.type == 8 && item.isOtherOption == 1 && item.showOtherOption && !isDisabled">
              <textarea-com class="textareaClass" :value="item.otherOption" maxLength="50" :showLength="true" @focus="inputFocus" @on-blur="inputBlur(item, index)" @onChangeInput="item.otherOption = $event">
              </textarea-com>
            </div>
            <div class="c-pl60" v-if="item.type == 8 && item.isOtherOption == 1 && item.showOtherOption && isDisabled">
              <div class="c-textAlign-l c-fs24 c-bd0 input-style c-br8 c-w100 c-ph20 c-pv20">{{ item.otherOption }}</div>
            </div>
          </ul>

          <!-- 填空题 -->
          <div v-if="item.type == 9">
            <div class="c-pb20">
              <span v-if="item.require == 1" class="c-fc-red c-mr6">*</span>
              <template v-if="item.bankList.length>1">
                {{ item.formIndex + '、' + item.bankTitle }}
              </template>
              <template v-else >
                {{ item.formIndex + '、' + item.bankList[0].title }}
              </template>
            </div>
            <div v-for="(bank,index) in item.bankList":key="index">
              <div v-if="item.bankList.length>1" class="c-fs22 c-fc-xblack c-wb-ba c-aligni-center c-pb10 c-pl10" :class="item.formIndex==1 && index==0?'':index==0?'c-pt10':'c-pt20'">
                {{ bank.title }}
              </div>
              <div class="short-answer-textarea  c-pv12 c-ph12 input-style c-br8">
                <textarea-com  :disabled="isDisabled" :value="bank.value" @focus="inputFocus" @on-blur="inputBlur(bank, index)" @onChangeInput="bank.value = $event;" v-if="!isDisabled"></textarea-com>
                <div v-if="isDisabled" class="c-fc-sgray">{{ bank.value }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="item.type == 11" class="">
          <div><span v-if="item.require == 1" class="c-fc-red">* </span>{{ item.formIndex + '、' + item.value.title }}</div>
          <div v-if="item.isWarnInfo == 1" class="c-fs22 c-fc-gray c-mt10" :class="item.require == 1 ? 'c-ml10' : ''">{{ item.warnInfo }}</div>
          <!-- 上传的图片 -->
          <div class="c-pt30 c-flexw-wrap c-flex-row">
            <div v-for="(img, imgIndex) in item.value.images" :key="imgIndex" class="c-ww170 c-hh170 c-mb10 c-flex-row c-flex-center c-p " :class="(imgIndex + 1) % 3 == 0 ? '' : 'c-mr10'">
              <div v-if="!isDisabled" @click="delUploadImage(index, imgIndex)" class="c-fc-gray del-img c-pz99">x</div>
              <img @click="clickPreviewImage(index, img)" class="c-ww170 c-hh170" :src="img" alt="" />
            </div>
            <div v-if="item.value.images.length < 9 && !isDisabled" class="c-ww170 c-hh170 upload-bg c-flex-row c-flex-center c-p">
              <div class="c-ww170 c-hh170 c-flex-row c-flex-center" @click="clickAddPic(index, '')">
                <i class="iconfont icon-jia1 c-fs48 c-fc-gray"></i>
              </div>
              <input class="c-pa c-opacity0 c-p-t0 c-p-l0 c-ww170 c-hh170 c-fs10" v-if="!isWeiXin" ref="uploadImg" name="file" type="file" accept="image/*" @change="clickAddPic(index, $event)" />
            </div>
          </div>
        </div>
        <div v-else-if="item.type == 18" class="">
          <div><span v-if="item.require == 1" class="c-fc-red">* </span>{{ item.formIndex + '、' + item.value.title }}</div>
          <div v-if="item.isWarnInfo == 1" class="c-fs22 c-fc-gray c-mt10" :class="item.require == 1 ? 'c-ml10' : ''">{{ item.warnInfo }}</div>
          <!-- 上传视频 -->
          <div class="c-mt20 c-flex-row c-justify-sb c-aligni-center">
            <div>
              <div class="c-ww320 c-hh180 c-br6" v-if="item.value.video != ''" @click="clickShowVideo(item.value.video)">
                <img class="c-w100 c-br6" src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png" alt="" />
              </div>
              <div class="c-ww170 c-hh170 upload-bg c-flex-row c-flex-center" v-if="item.value.video == '' && !isDisabled" @click="clickUploadVideo(index)">
                <div class="c-ww170 c-hh170 c-flex-row c-flex-center">
                  <i class="iconfont icon-jia1 c-fs48 c-fc-gray"></i>
                </div>
              </div>
              <input class="hide c-cursor-p needsclick" id="myUpload" type="file" accept="video/*" @change.stop="onInputChange($event)" />
            </div>
            <i @click.stop="clickDelVideo(index)" class="iconfont c-fs32 c-fc-sgray" v-if="item.value.video != '' && !isDisabled">&#xe6ec;</i>
          </div>
          <my-loading :showLoading="showProgress" :text="uploadProgress"></my-loading>
        </div>
        <div v-else-if="item.type == 19" class="">
          <div><span v-if="item.require == 1" class="c-fc-red">* </span>{{ item.formIndex + '、' + item.value.title }}</div>
          <input type="text" :disabled="isDisabled" v-model="item.value" placeholder="请输入邮箱" class="c-textAlign-l c-fs24 c-bd0 input-style c-br8 c-w100 c-hh76 c-ph20" @focus="inputFocus" @blur="inputBlur(item, index)" @input="inputCheck(item)"/>
        </div>
      </div>
      <!-- 视频弹窗 -->
      <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
      <div v-if="formInfo && formInfo.synchronizeUserData == 1" ref="mention" class="c-fs22 c-mt28 c-ph24 c-bg-white c-fc-gray c-lh-18 c-p" :class="showMore ? '' : 'c-text-ellipsis2'">
        说明：以上信息将为您同步到个人资料中。在切实做好资料保密的前提下，为了更好的为客户提供服务，在保障客户权益的前提下我们在店铺范围内合理使用手机客户个人信息用于服务通知、服务改进业务提醒等。我们将对提供服务过程中对客户信息严格履行保护义务。
      </div>
      <div v-if="formInfo && formInfo.synchronizeUserData == 1" @click="showMore = !showMore" class="c-fs22 theme-fc c-textAlign-r c-ph24 c-mb40">{{ showMore ? '收起' : '展开' }}</div>
    </div>

    <!-- formInfo: type表单类型1报名 2调研；isAllow 1 调研表单允许一人填多份-->
    <div v-if="logId && logId != -1 && !isEditing && formInfo && formInfo.type == 2 && (isEnableEdit || formInfo.isAllow == 1)" class="c-flex-row c-flex-center c-ph24 c-pf c-p-b0 c-w100 c-maxw640 c-pz100 c-hh100 c-bg-white c-box-shadowEdu">
      <div v-if="formInfo.isAllow == 1" class="c-flex-1 c-flex-column c-flex-center" @click="goWriteAnother">
        <span class="iconfont c-fs36 c-fc-xblack">&#xe630;</span>
        <span class="c-fs16 c-fc-xblack c-mt8">再填一份</span>
      </div>
      <div v-if="isEnableEdit" class="c-flex-1 c-flex-column c-flex-center" @click="changeEditStatus">
        <span class="iconfont c-fs36 c-fc-xblack">&#xe625;</span>
        <span class="c-fs16 c-fc-xblack c-mt8">重新编辑</span>
      </div>
    </div>
    <div v-else class="c-pf c-p-b0 c-w100 c-maxw640 c-pz100 c-bg-white c-box-shadow-bottom c-ph24 c-pb20 c-pt12">
      <div class="c-fs20" v-if="!isSubmitForm" :class="isShake ? 'shake':''">
        <span class="iconfont c-fs24 c-lh42 c-fc-gray c-pr4 c-p" :class="isCheckAgreement ? 'theme-fc' : 'c-fc-gray'" @click="agreeClick">
          {{isCheckAgreement ? '&#xe796;' : '&#xe6f7;'}}
          <i v-if="isGreeClick" class="bubble">
            请阅读并同意协议
          </i>
        </span>
        <span @click="agreeClick">我已阅读并同意</span>
        <span class="theme-fc" @click.stop="clickProtocol()">《信息采集声明》</span>
      </div>
      <div class="c-w100 c-mt12 c-hh76 c-flex-row c-flex-center c-fs28 c-fc-white c-br50" :class="isSubmitForm ? 'c-bg-ccc' : 'theme-bg '" @click="checkForm()">{{ isSubmitForm ? '已提交' : (logId && formInfo && formInfo.type == 2 ? '确认修改' : '提交') }}</div>
    </div>

  </div>
</template>

<script>
import textareaCom from '@/components/templates/common/textareaCom.vue';
import { utilJs, wxUtilJs } from '@/utils/common.js';
import { PopupPicker, XAddress, Datetime } from 'ckjrweb-mp-ui/src/components/index';
import videoPopup from '@/components/templates/common/videoPopup.vue';
import myLoading from '@/plugin/loading/loading.vue';
import nationData from '../../../nation.json';
import TcVod from 'vod-js-sdk-v6';
import { getBindPhoneSetting } from '@/utils/checkUnBindPhone.js';
let inputScrollTop = 0;
let isLoading = false;
let startTimeTmp = 0; //记录刚进入页面时间戳
let serverIdImgArr = []; //上传图片的serverID
let imgData = {};
let uploader = null;
export default {
  name: 'Form',
  components: {
    PopupPicker,
    XAddress,
    Datetime,
    textareaCom,
    myLoading,
    videoPopup
  },
  props: {
    formComList: {
      //表单 content
      type: Array,
      default: () => {
        return [];
      }
    },
    fUsername: {
      //用户名
      type: String,
      default: ''
    },
    fMobile: {
      //手机号
      type: String,
      default: ''
    },
    fCkFrom: {
      type: String,
      default: ''
    },
    relId: { // 表单id
      type: String,
      default: ''
    },
    formInfo: { // 表单信息
      type: Object,
      default: () => {}
    }
  },
  beforeCreate() { },
  data() {
    return {
      isShake: false, // 是否抖动
      isGreeClick: false,
      companyAuth: null,
      formList: [],
      theme: localStorage.getItem('colorName') ? localStorage.getItem('colorName') : 'mb5_default',
      sexData: [['男', '女']],
      sex: [],
      ttId: '', //营期ID
      tpId: '', //环节ID
      tlId: '', //课时ID
      addressData: '',
      uploadImgList: [], //用户上传的图片集合
      showAddress: false,
      cFrom: global.ckFrom,
      addressVal: '',
      addressId: '',
      addressId2: '',
      addressVal2: '',
      isWeiXin: true,
      nationData: [nationData],
      nation: [],
      showMore: false,
      startDate: '',
      selectValue: '', //下拉框值
      date: '', //日期
      isIos: navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      yzText: '获取验证码',
      mobilePhone: '', //手机号
      num: 60, //计秒
      isYz: true,
      isClick: false,
      interval: null,
      code: '', //验证码
      username: '',
      mobile: '',
      ckFrom: '',
      showProgress: false,
      uploadProgress: '0',
      isPlayingAudio: false,
      currentVideoObj: {},
      showVideo: false,
      videoIndex: 0,
      bindPhoneSetting: null,
      showBindPhone: false,
      isEditing: true, // 是否正在编辑
      isCheckAgreement: false, // 是否同意信息采集
    };
  },
  created() {
    startTimeTmp = new Date().getTime();
    this.isWeiXin = utilJs.isWeiXin();
    this.companyAuth = localStorage.getItem("companyAuth");
  },
  mounted() {
  },
  computed: {
    isEnableEdit() { // enableEdit 已填写的用户支持编辑表单内容 1关闭  2开启
      return this.formInfo && this.formInfo.enableEdit == 2 ? true : false;
    },
    //提交状态
    isSubmitForm() {
      return this.formInfo && this.formInfo.isSubmitForm;
    },
    isRepeatedCollect() { //是否开启重复采集，报名表单的重复采集字段, 关闭重复采集的，自动获取已经填写的值
      return this.formInfo && this.formInfo.isRepeatedCollect;
    },
    logId() { // 表单记录id
      return this.formInfo && this.formInfo.logId ? this.formInfo.logId : ''
    },
    isDisabled() { // 是否允许编辑 调研表单非编辑状态 || isSubmitForm 已提交
      return (this.formInfo && this.formInfo.type == 2 && !this.isEditing) || (this.formInfo && this.formInfo.isSubmitForm);
    }
  },
  watch: {
    formComList: {
      handler(newV, oldVal) {
        if (this.formList.length == 0) {
          this.formList = newV;
          this.$nextTick(() => {
            this.loadFormData();
            this.getFormDraft();
            this.isEditing = !!this.logId ? false : true;
          });
        }
      },
      immediate: true
    },
    fUsername(newV) {
      this.username = newV;
    },
    fMobile(newV) {
      this.mobile = newV;
    },
    fCkFrom(newV) {
      this.ckFrom = newV;
    },
  },
  methods: {
    agreeClick() {
      this.isCheckAgreement = !this.isCheckAgreement
      this.isGreeClick = !this.isCheckAgreement
    },
    // 跳转到创匠信息采集声明
    clickProtocol() {
      this.$router.push('/homePage/collectDeclaration')
    },
    getFormDraft() {
      let formDraft = localStorage.getItem("formDraft") ? JSON.parse(localStorage.getItem("formDraft")) : {};
      if (formDraft && !(formDraft.relId == this.relId && formDraft.logId == this.logId)) {
        return;
      }
      let formDraftList = formDraft.formList || [];
      this.formList.forEach((item, index) => {
        let draftItemList = formDraftList.filter(dItem => dItem.id == item.id);
        let draftItem = null
        // 防止旧数据重复id，导致赋值错误,id相同，比type，type相同比title，都相同就都置空，区分不出来了
        if (draftItemList && draftItemList.length > 1) {
          let draftItemList2 = draftItemList.filter(dItem => dItem.type == item.type);
          if (draftItemList2 && draftItemList2.length > 1) {
            let draftItemList3 = draftItemList.filter(dItem => dItem.title == item.title);
            if (draftItemList3 && draftItemList3.length == 1) {
              draftItem = draftItemList3[0]
            }
          } else {
            draftItem = draftItemList2[0]
          }
        } else {
          draftItem = draftItemList[0]
        }
        // 单选、多选、下拉菜单value默认值是数组，上传图片/视频value默认值是对象，需要另外判断默认值是否为空
        let isAddDraft = ![8, 11, 14, 18].includes(Number(item.type)) ? !item.value : (!((item.type == 8 || item.type == 14) && item.value && item.value.length) && !(item.type == 11 && item.value && item.value.images && item.value.images.length) && !(item.type == 18 && item.value && item.value.video))
        if (draftItem && isAddDraft) {
          item.value = draftItem.value;
          if (item.type == 6) {
            item.value2 = draftItem.value2;
            item.value3 = draftItem.value3;
          } else if (item.type == 8 && item.multiple == 0) {
            item.optIndex = draftItem.optIndex;
          }
        }
        this.isShowItemForm(index);
      });
    },
    _saveDraft(index) {
      if (!this.relId || (index !== 0 && !index)) {
        return
      }
      console.log(index, '_saveDraft')
      let formDraft = localStorage.getItem("formDraft") ? JSON.parse(localStorage.getItem("formDraft")) : {};
      if (formDraft && !(formDraft.relId == this.relId && formDraft.logId == this.logId)) {
        formDraft = {relId: this.relId, logId: this.logId}
      }
      let formList = JSON.parse(JSON.stringify(this.formList))
      let item6 = formList.find(item => item.type == 6);
      if (item6) {
        item6.value2 = this.addressVal2 || item6.value2;
        item6.value3 = this.addressId2 || item6.value3;
      }
      formDraft.formList = formList;
      formDraft.setDraftTime = new Date().getTime()
      localStorage.setItem("formDraft", JSON.stringify(formDraft));
    },
    goWriteAnother() {
      if (this.formInfo && this.formInfo.recoverArr && this.formInfo.recoverArr.gameOver) {
        this.$showCjToast({
          text: this.formInfo.recoverArr.recoveryTip || '表单已收集结束，感谢您的关注',
          type: "warn",
        })
        return;
      }
      let query = this.$route.query || {};
      let url = `/homePage/form?relId=${query.relId}&relType=${query.relType}&type=${query.type}&ckFrom=${query.ckFrom}&logId=-1`
      if (query.ckFrom == 78) {
        url = url + `&ttId=${query.ttId}&tpId=${query.tpId}&tlId=${query.tlId}`
      }
      // `/homePage/form?relId=${query.relId}&relType=${query.relType}&type=${query.type}&ckFrom=${query.ckFrom}&logId=-1`
      this.$routerGo(this, "push", {path:url });
    },
    changeEditStatus() {
      this.isEditing = !this.isEditing;
    },
    getMobileSetting: function () {
      getBindPhoneSetting(global.ckFrom.form).then(res => {
        this.bindPhoneSetting = res;
      });
    },
    //验证码
    getYzMethod: function () {
      this.isYz = false;
      this.num -= 1;
      this.yzText = this.num + '秒后重新获取';
      if (this.num == 0) {
        clearInterval(this.interval);
        this.yzText = '获取验证码';
        this.isYz = true;
        this.num = 60;
        this.isClick = false;
      }
    },
    //点击获取验证码
    getYzcode: function (mobile) {
      if (!this.isClick) {
        this.isClick = true;
        if (utilJs.isPhoneNumber(mobile)) {
          let $this = this;
          $this.yzText = '发送中';
          utilJs.postMethod(
            global.apiurl + 'k12/forms/sendCode',
            {
              mobile: mobile
            },
            res => {
              if (res.errMsg) {
                $this.yzText = '获取验证码';
                $this.isClick = false;
                $this.$showCjToast({
                  text: res.errMsg,
                  type: 'warn',
                });
              } else {
                this.mobilePhone = mobile;
                $this.interval = setInterval($this.getYzMethod, 1000);
              }
            },
            function () {
              clearInterval($this.interval);
              $this.yzText = '获取验证码';
              $this.isYz = true;
              $this.num = 60;
              $this.isClick = false;
            }
          );
        } else {
          this.$showCjToast({
            text: '请输入正确的手机号',
            type: 'warn',
          });
          this.isClick = false;
        }
      }
    },
    //跳转到图片指定的位置
    goUrl(urlStr) {
      if (utilJs.isIOSAppALL()) {
        return;
      }
      if (urlStr && urlStr != '') {
        if (urlStr.includes('http') || urlStr.includes('https')) {
          utilJs.locationHref(urlStr);
        } else {
          utilJs.locationHref('http://' + urlStr);
        }
      }
    },
    /*
    显示规则
    showForm : 0 隐藏，1 显示
    condition:(0不显示1显示2不选中3选中)，option:选项规则
    isSkip : 跳转逻辑的表单    showForm: 显示逻辑的表单    isChangeHid: 被跳转逻辑隐藏在中间的表单
    */
    isShowItemForm(index) {
      let $this = this;
      let ttIndex = index;
      let chanIndex = 0;
      for (let i = 0; i < this.formList.length; i++) {
        let showIndex = []; //跳转逻辑符合条件
        let hidSkip = []; //跳转逻辑不符合条件
        let showIn = 0; //当前显示逻辑符合条件的数量
        //显示逻辑
        if (i > index) {
          this.formList[i].showLogic.forEach(ele => {
            if (ele.question !== '') {
              if (this.formList[ele.question].isChangeHid == 2) {
                //被跳转逻辑隐藏的中间表单
                if (ele.condition == 0) {
                  showIn++;
                } else {
                  this.formList[i].showForm = 0;
                  this.forListHid(i); // 清空选项的内容或填写的内容
                }
              } else if (ele.condition == 0 || ele.condition == 1) {
                //显示 或 不显示符合条件时
                if (ele.condition == 0) {
                  //显示
                  if ((this.formList[ele.question].isSkip != 1 && this.formList[ele.question].showForm != 1) || this.formList[ele.question].isChangeHid == 2) {
                    showIn++;
                  } else {
                    this.formList[i].showForm = 0;
                    this.forListHid(i);
                  }
                } else {
                  //不显示
                  if (this.formList[ele.question].isSkip == 1 || this.formList[ele.question].showForm == 1) {
                    //依赖不显示的情况下显示条件成立
                    showIn++;
                  } else {
                    this.formList[i].showForm = 0;
                    this.forListHid(i);
                  }
                }
              } else if (this.formList[ele.question].multiple == 1 && this.formList[ele.question].type == 8 && this.formList[ele.question].answerCheckbox) {
                //多选并已选择
                if (ele.option == -1) {
                  //条件为 任一选项
                  if (this.formList[ele.question].answerCheckbox.length > 0) {
                    if (ele.condition == 3) {
                      //选中
                      showIn++;
                    } else {
                      //不选中
                      this.formList[i].showForm = 0;
                      this.forListHid(i);
                    }
                  } else {
                    this.formList[i].showForm = 0;
                    this.forListHid(i);
                  }
                } else {
                  //判断选项是否满足显示条件
                  if (this.formList[ele.question].answerCheckbox.length > 0) {
                    if (ele.option.length == this.formList[ele.question].answerCheckbox.length) {
                      let optionSort = ele.option.sort((a, b) => {
                        return a - b;
                      });
                      let answerSort = this.formList[ele.question].answerCheckbox.sort((a, b) => {
                        return a - b;
                      });
                      let selIndex = 0;
                      for (let s = 0; s < optionSort.length; s++) {
                        if (optionSort[s] == answerSort[s]) {
                          selIndex++;
                        }
                      }
                      if (selIndex == optionSort.length) {
                        //option与当前选项条件相等
                        if (ele.condition == 3) {
                          //选中条件
                          showIn++;
                        } else {
                          this.formList[i].showForm = 0;
                          this.forListHid(i);
                        }
                      } else {
                        if (ele.condition == 2) {
                          //不选中条件
                          showIn++;
                        } else {
                          this.formList[i].showForm = 0;
                          this.forListHid(i);
                        }
                      }
                    } else {
                      if (ele.condition == 2) {
                        // 不选中条件 已选择并与条件选项数量不想等
                        showIn++;
                      } else {
                        this.formList[i].showForm = 0;
                        this.forListHid(i);
                      }
                    }
                  }
                }
              } else {
                if (ele.condition == 2) {
                  //不选中
                  if (
                    ele.option != this.formList[ele.question].optIndex &&
                    this.formList[ele.question].optIndex !== '' &&
                    this.formList[ele.question].optIndex !== [] &&
                    this.formList[ele.question].optIndex !== undefined
                  ) {
                    showIn++; //满足显示条件
                  } else {
                    this.formList[i].showForm = 0;
                    this.forListHid(i);
                  }
                } else if (ele.condition == 3) {
                  //选中
                  if (
                    (ele.option == this.formList[ele.question].optIndex || ele.option == -1) &&
                    this.formList[ele.question].optIndex !== '' &&
                    this.formList[ele.question].optIndex !== [] &&
                    this.formList[ele.question].optIndex !== undefined
                  ) {
                    showIn++; //满足显示条件
                  } else {
                    this.formList[i].showForm = 0;
                    this.forListHid(i);
                  }
                }
              }
            }
          });
          // 任一选项 或 只有一个显示条件
          if (showIn > 0 && (this.formList[i].showCondition == -1 || (this.formList[i].showCondition == 1 && showIn == this.formList[i].showLogic.length))) {
            this.formList[i].showForm = 1;
          }
        }
        //跳转逻辑
        if (i >= ttIndex) {
          //从显示的位置开始
          this.formList[i].skipLogic.forEach(item => {
            if (item.skip !== '') {
              if (this.formList[i].multiple == 1 && this.formList[i].type == 8 && this.formList[i].answerCheckbox) {
                // 多选
                if (item.option == -1 && this.formList[i].answerCheckbox.length > 0) {
                  //任一选项
                  showIndex.push(item.skip);
                  chanIndex = item.skip;
                  ttIndex = item.skip == -1 ? $this.formList.length : item.skip; // 跳转的位置
                } else {
                  if (item.option.length == this.formList[i].answerCheckbox.length) {
                    //多选判断条件是否成立
                    let optionSort = item.option.sort((a, b) => {
                      return a - b;
                    });
                    let answerSort = this.formList[i].answerCheckbox.sort((a, b) => {
                      return a - b;
                    });
                    let selIndex = 0;
                    for (let i = 0; i < optionSort.length; i++) {
                      if (optionSort[i] == answerSort[i]) {
                        selIndex++;
                      }
                    }
                    if (selIndex == optionSort.length) {
                      //正确选择
                      showIndex.push(item.skip);
                      chanIndex = item.skip;
                      ttIndex = item.skip == -1 ? $this.formList.length : item.skip;
                    } else {
                      hidSkip.push(item.skip);
                    }
                  } else {
                    hidSkip.push(item.skip);
                  }
                }
              } else {
                // 单选 填空
                if (this.formList[i].type == 5 || this.formList[i].type == 8 || this.formList[i].type == 13 || this.formList[i].type == 14) {
                  //选择
                  if (
                    (item.option == this.formList[i].optIndex || item.option == -1 || this.formList[i].type == 13) &&
                    this.formList[i].optIndex !== undefined &&
                    this.formList[i].optIndex !== '' &&
                    this.formList[i].optIndex !== []
                  ) {
                    showIndex.push(item.skip); //跳转条件成立，当前题可能会有多个跳转条件
                    chanIndex = item.skip;
                    ttIndex = item.skip == -1 ? $this.formList.length : item.skip;
                  } else {
                    hidSkip.push(item.skip); // 条件不成立
                  }
                } else {
                  if (this.formList[i].showForm == 1 || this.formList[i].isSkip == 1) {
                    showIndex.push(item.skip);
                    chanIndex = item.skip;
                    ttIndex = item.skip == -1 ? $this.formList.length : item.skip;
                  } else {
                    hidSkip.push(item.skip);
                  }
                }
              }
            }
          });
        } else {
          if (i > index) {
            //判断跳转的中间表单被隐藏或显示时 其对用的跳转规则
            this.formList[i].skipLogic.forEach(showChan => {
              if (showChan.skip !== '' && chanIndex != -1) {
                if (showChan.skip == -1) {
                  for (let showC = chanIndex + 1; showC < this.formList.length; showC++) {
                    this.formList[showC].isChangeHid = 1;
                  }
                } else {
                  if (this.formList[showChan.skip].isSkip == 1 && showChan.skip != chanIndex) {
                    //跳转跟当前不同一个
                    this.formList[showChan.skip].isSkip = 0;
                    if (this.formList[showChan.skip].showForm == 0 || this.formList[showChan.skip].isChangeHid == 2) {
                      this.forListHid(showChan.skip);
                    }
                    if (chanIndex > i && chanIndex < showChan.skip) {
                      for (let hidChange = chanIndex + 1; hidChange < showChan.skip; hidChange++) {
                        this.formList[hidChange].isChangeHid = 1;
                      }
                    }
                  }
                }
              }
            });
          }
        }
        //取消跳转
        if (hidSkip.length > 0) {
          hidSkip.forEach(hidNum => {
            if (hidNum != -1) {
              $this.formList[hidNum].isSkip = 0;
              if ($this.formList[hidNum].showForm == 0 || $this.formList[hidNum].isChangeHid == 2) {
                $this.forListHid(hidNum);
              }
              $this.showChange(hidNum, i, 1);
            } else {
              $this.showChange($this.formList.length, i, 1);
            }
          });
        }
        //跳转
        if (showIndex.length > 0) {
          showIndex.forEach(showK => {
            if (showK != -1) {
              $this.formList[showK].isSkip = 1;
              $this.formList[showK].isChangeHid = 1;
              $this.showChange(showK, i, 2);
            } else {
              $this.showChange($this.formList.length, i, 2);
            }
          });
        }
      }
    },
    // 遍历跳转逻辑表单重置value
    forListHid(opi) {
      if (((this.formList[opi].showForm == 0 && this.formList[opi].isSkip != 1) || this.formList[opi].isChangeHid == 2) && this.formList[opi].type != 10 && this.formList[opi].type != 15) {
        if (this.formList[opi].type == 11) {
          this.formList[opi].value.images = [];
        } else if (this.formList[opi].type == 6) {
          this.formList[opi].value = '';
          this.formList[opi].value2 = [];
          this.formList[opi].value3 = [];
        } else {
          if ((this.formList[opi].type == 8 && this.formList[opi].multiple != 1) || this.formList[opi].type == 5 || this.formList[opi].type == 13 || this.formList[opi].type == 14) {
            this.formList[opi].optIndex = '';
          }
          this.formList[opi].value = typeof this.formList[opi].value == 'object' && this.formList[opi].value.constructor == Array ? [] : '';
          if (this.formList[opi].type == 8 && this.formList[opi].showOtherOption) {
            this.formList[opi].showOtherOption = false;
            this.formList[opi].otherOption = '';
          }
        }
        if (this.formList[opi].option && typeof this.formList[opi].option == 'object' && this.formList[opi].option.constructor == Array && this.formList[opi].type != 14) {
          if (this.formList[opi].option.length > 0) {
            this.checkoutOption(opi);
          }
        }
      }
    },
    // 取消单选多选
    checkoutOption(index) {
      if (this.formList[index].answerCheckbox) {
        this.formList[index].answerCheckbox = [];
      }
      this.formList[index].option.forEach(ele => {
        if (ele.checked) {
          this.$set(ele, 'checked', false);
        }
      });
    },
    // 选择时间
    confirmTime(val, index) {
      if (this.isSubmitForm) {
        return;
      }
      this.date = val;
      this.formList[index].value = val;
      this._saveDraft(index);
    },
    // 跳转逻辑显示隐藏中间
    showChange(skip, index, isHide) {
      if (Number(skip) - index > 1) {
        for (let hidNum = index + 1; hidNum < skip; hidNum++) {
          if (this.formList[hidNum].type != 10 && this.formList[hidNum].type != 15 && this.formList[hidNum].type != 17) {
            this.formList[hidNum].isChangeHid = isHide;
            if (isHide == 2) {
              this.forListHid(hidNum);
            }
          }
        }
      }
    },
    // 下拉框选择
    onSelectChange(e, index) {
      if (this.isSubmitForm) {
        return;
      }
      if (this.selectValue != e.value) {
        let cIndex = -1;
        this.selectValue = e.value;
        e.seOption[0].forEach((item, cIn) => {
          if (item == e.value[0]) {
            cIndex = cIn;
          }
        });
        e.optIndex = cIndex;
        this.isShowItemForm(index);
      }
      this._saveDraft(index);
    },
    onAddressConfim(e, index) {
      this.formList.forEach((ele) => {
        if (ele.type == 6) {
          if (e) {
            this.addressVal2 = this.addressVal;
            this.addressId2 = this.addressId;
          } else {
            this.addressVal = this.addressVal2;
            this.addressId = this.addressId2;
          }
        }
      });
      this._saveDraft(index);
    },
    // 修改地址组件值
    changeAddress(ids, names) {
      let province = names[0];
      let city = names[1];
      let area = names[2] || '';
      this.addressVal = {
        province: province,
        city: city,
        area: area
      };
      this.addressId = {
        provinceId: ids[0],
        cityId: ids[1],
        areaId: ids[2]
      };
    },
    //单选
    chooseRadio(item, index, option, optIndex) {
      if (this.isDisabled) {
        return;
      }
      if (option.isOtherOption && option.isOtherOption == 1) {
        item.showOtherOption = true;
      } else {
        item.showOtherOption = false;
      }
      item.value = option.key;
      item.optIndex = optIndex;
      this.$set(this.formList, index, item);
      this.isShowItemForm(index);
      this._saveDraft(index);
    },
    //初始表单数据
    // type: 1.姓名，2.微信号，3.年龄，4.手机号，5.性别，6.地址，7.职位，8.单选/多选，9.填空，10.图片跳转，11.上传图片，12.身份证，13.民族，14.下拉框，15.描述文字，16.日期，17.分隔 18.上传视频
    loadFormData() {
      let $this = this;
      let formIndex = 1;
      $this.formList.forEach((item, cIn) => {
        if (item.type != 17 && item.type != 15 && item.type != 10) {
          $this.$set(item, 'formIndex', formIndex);
          //item.formIndex = formIndex
          formIndex++;
        }
        if (!this.isDisabled) {
          item.isSkip = item.isSkip ? item.isSkip : 0;
          item.showForm = item.showForm ? item.showForm : 1;
          let showLogicIndex = 0; //满足显示条件数量
          // 初始显示逻辑
          if (item.showLogic) {
            item.showLogic.forEach(elem => {
              if (elem.question === '' && item.showLogic.length == 1) {
                showLogicIndex++;
              }
              if (elem.question !== '') {
                //condition:(0不显示1显示2不选中3选中)，option:选项
                if (item.showCondition == -1 || item.showLogic.length == 1) {
                  //任一
                  if (elem.condition == 0 && (($this.formList[elem.question].showForm == 0 && $this.formList[elem.question].isSkip != 1) || $this.formList[elem.question].isChangeHid == 2)) {
                    showLogicIndex++;
                  } else if (elem.condition == 1 && ($this.formList[elem.question].showForm == 1 || $this.formList[elem.question].isSkip == 1) && $this.formList[elem.question].isChangeHid != 2) {
                    showLogicIndex++;
                  }
                } else {
                  if (elem.condition == 0) {
                    if (($this.formList[elem.question].showForm == 0 && $this.formList[elem.question].isSkip != 1) || $this.formList[elem.question].isChangeHid == 2) {
                      showLogicIndex++;
                    }
                  } else if (elem.condition == 1) {
                    if (($this.formList[elem.question].showForm == 1 || $this.formList[elem.question].isSkip == 1) && $this.formList[elem.question].isChangeHid != 2) {
                      showLogicIndex++;
                    }
                  }
                }
                if (elem.condition == 2 || elem.condition == 3) {
                  //修改‘其他’选项为最后一选项
                  if ($this.formList[elem.question].multiple == 1 && elem.option.indexOf(-2) > -1) {
                    //多选
                    elem.option[elem.option.indexOf(-2)] = $this.formList[elem.question].option.length - 1;
                  } else if ($this.formList[elem.question].multiple == 0 && elem.option == -2) {
                    elem.option = $this.formList[elem.question].option.length - 1;
                  }

                  // 选中或者不选中的时候---如何判断他对应题目是否选中
                  if ($this.formList[elem.question].multiple == 0 && $this.formList[elem.question].option[elem.option] && $this.formList[elem.question].value == $this.formList[elem.question].option[elem.option].key) {
                    showLogicIndex++;
                  }
                  // 多选
                  let key = ""
                  if ($this.formList[elem.question].option && $this.formList[elem.question].option[elem.option] && $this.formList[elem.question].option[elem.option].key) {
                    key = $this.formList[elem.question].option[elem.option].key
                  }
                  if ($this.formList[elem.question].multiple == 1 && $this.formList[elem.question].value.includes(key)) {
                    showLogicIndex++;
                  }
                  this.isShowItemForm(cIn);
                }
              }
            });
          }
          if (item.showLogic) {
            if (item.showCondition == 1 && item.showLogic.length > 1) {
              //显示条件大于1 且 需要满足全部条件时
              if (showLogicIndex == item.showLogic.length) {
                item.showForm = 1;
              } else {
                item.showForm = 0;
              }
            } else if ((item.showCondition == -1 || item.showLogic.length == 1) && showLogicIndex > 0) {
              item.showForm = 1;
            } else {
              item.showForm = 0;
            }
          }
          // 初始跳转逻辑
          if (item.skipLogic) {
            item.skipLogic &&
              item.skipLogic.forEach(ele => {
                if (item.type != 5 && item.type != 8 && item.type != 13 && item.type != 14 && ele.skip !== '' && (item.showForm == 1 || item.isSkip == 1) && item.isChangeHid != 2) {
                  let endIndex = ele.skip;
                  if (ele.skip == -1) {
                    //跳转到最后
                    endIndex = $this.formList.length;
                  } else {
                    $this.formList[ele.skip].isSkip = 1;
                  }
                  for (let i = cIn + 1; i < endIndex; i++) {
                    //隐藏中间初始跳转逻辑
                    if ($this.formList[i].type != 10 && $this.formList[i].type != 15 && $this.formList[i].type != 17) {
                      $this.formList[i].isChangeHid = 2;
                    }
                  }
                } else if (item.type == 8 && item.isOtherOption == 1) {
                  if (item.multiple == 1 && ele.option.indexOf(-2) > -1) {
                    //多选 修改‘其他’选项为最后一选项
                    ele.option[ele.option.indexOf(-2)] = item.option.length;
                  } else if (item.multiple == 0 && ele.option == -2) {
                    //单选 修改‘其他’选项为最后一选项
                    ele.option = item.option.length;
                  }
                }
              });
          }
          // 描述文字
          if (item.type == 15) {
            item.value = item.value.replace(/ /gm, '&nbsp;');
            item.value = item.value.replace(/(\r\n|\n|\r)/gm, '<br />');
          }
          //选择题增加 其他 选项
          if (item.type == 8) {
            //多选
            if (item.multiple == 1) {
              item.answerCheckbox = [];
            }
            if (item.isOtherOption == 1 && !item.option[item.option.length - 1].isOtherOption) {
              item.otherOption = '';
              item.option.push({ key: '其他', isOtherOption: 1 });
            }
          }
        }
        if (item.type == 3) {
          // 年龄
          $this.$set(item, 'maxLength', '3');
        }
        if (item.type == 4) {
          // 手机号
          $this.$set(item, 'maxLength', '11');
        }
        // 性别
        if (item.type == 5 && ($this.isSubmitForm || $this.isRepeatedCollect == 0) && item.value) {
          $this.sex = [item.value];
        }
        // 民族
        if (item.type == 13 && ($this.isSubmitForm || $this.isRepeatedCollect == 0) && item.value) {
          $this.nation = [item.value];
        }
        // 地址
        if (item.type == 6) {
          if (($this.isSubmitForm || $this.isRepeatedCollect == 0) && item.value2.province) {
            let province = item.value2['province'];
            let city = item.value2['city'];
            let area = item.value2['area'];
            item.value2 = [province, city, area];
            this.addressVal2 = {
              province,
              city,
              area
            };
          } else {
            item.value2 = [];
          }
          if (!$this.addressData || $this.addressData == '' || $this.addressData == null) {
            utilJs.getMethod(
              `${global.apiurl}common/getAreaListForAgent`,
              resarea => {
                $this.addressData = resarea.data;
                //$this.$forceUpdate();
              },
              failRes => { }
            );
          }
        }
        // 下拉框
        if (item.type == 14) {
          let seOption = [];
          item.seOption = [];
          item.option.forEach((ele, index) => {
            seOption.push(ele.key);
          });
          item.seOption.push(seOption);
        }
        // 已提交的多选题
        if (item.type == 8 && item.multiple == 1 && ($this.isSubmitForm || $this.isRepeatedCollect == 0)) {
          for (let value of item.value) {
            for (let option of item.option) {
              if (value == option.key) {
                option.checked = true;
              }
            }
          }
        }
        // 上传图片
        if (item.type == 11) {
          $this.uploadImgList.push(item);
        }
        if (item.type == 1 && $this.ckFrom == global.ckFrom.activity && this.username) {
          item.value = this.username;
        }
        if (item.type == 4 && $this.ckFrom == global.ckFrom.activity && this.mobile) {
          item.value = this.mobile;
        }
        this.isShowItemForm(cIn);
      });
      if (!utilJs.isWeiXin()) {
        //获取阿里云签名，除了微信浏览器以外
        utilJs.getAliSign(`${global.apiurl}imageSign`, res => {
          imgData = res;
        });
      }
    },
    //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      if (this.isPlayingAudio == true) {
        this.playAudioEnd();
      }
      this.showVideo = true;
      this.currentVideoObj = { videoSrc, m3u8Url };
    },
    clickUploadVideo(index) {
      this.videoIndex = index;
      document.getElementById('myUpload').click();
    },
    videoFirstSave(data) {
      utilJs.postMethod(global.apiurl + 'signCard/videoFirstSave', data, res => { });
    },
    //获取得到的文件file
    onInputChange(e) {
      let inputFile = e.target.files[0];
      if (inputFile && inputFile.size > 1024 * 1024 * 1024) {
        this.$showCjToast({
          text: '视频文件大小不能超过1G',
          type: 'warn',
        });
        document.getElementById('myUpload').value = null;
        return false;
      }
      if (inputFile) {
        this.uploadVideoToTencent(inputFile);
      }
    },
    uploadVideoToTencent(inputFile) {
      let that = this;
      this.showProgress = true;
      const tcVod = new TcVod({ getSignature: utilJs.getVideoSign });
      uploader = tcVod.upload({
        mediaFile: inputFile // 媒体文件（视频或音频或图片），类型为 File
      });
      uploader.on('media_progress', function (info) {
        that.uploadProgress = `上传进度:${Math.floor(info.percent * 100)}%`;
      });
      uploader
        .done()
        .then(function (result) {
          that.videoMp4 = result.video.url;
          that.showProgress = false;
          let videoInfo = {
            url: result.fileId,
            realUrl: result.video.url
          };
          that.formList[that.videoIndex].value.video = videoInfo.realUrl;
          let data = {
            videoId: result.fileId,
            videoMp4: result.video.url,
            videoName: inputFile.name
          };
          that.videoFirstSave(data);
          that.uploadProgress = '0';
          document.getElementById('myUpload').value = null;
          that._saveDraft(that.videoIndex);
        })
        .catch(err => {
          that.showProgress = false;
          that.$showCjToast({
            text: '上传失败，请尝试重新上传',
            type: 'warn',
          });
          that.uploadProgress = '0';
          document.getElementById('myUpload').value = null;
          let errorData = {
            errorMsg: JSON.stringify(err),
            errorType: 'UPLOAD_VIDEO_ERROR'
          };
          utilJs.reprotError(errorData);
        });
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    // 删除视频
    clickDelVideo(index) {
      this.formList[index].value.video = '';
      this._saveDraft(index);
    },
    // 选择题
    checkboxAnswer(option, answer, item, index, optIndex) {
      if (!this.isDisabled) {
        this.$set(option, 'checked', !option.checked);
        if (option.checked) {
          if (!item.answerCheckbox) {
            this.$set(item, 'answerCheckbox', []);
          }
          if (option.isOtherOption && option.isOtherOption == 1) {
            this.$set(item, 'showOtherOption', true);
          }
          item.answerCheckbox.push(optIndex);
          if (item.answerCheckbox.length > 1) {
            item.answerCheckbox.sort((a, b) => {
              return a - b;
            });
            answer.splice(item.answerCheckbox.indexOf(optIndex), 0, option.key);
          } else {
            answer.push(option.key);
          }
        } else {
          if (item.answerCheckbox && item.answerCheckbox.length > 0) {
            item.answerCheckbox.splice(item.answerCheckbox.indexOf(optIndex), 1);
          }
          if (option.isOtherOption && option.isOtherOption == 1) {
            this.$set(item, 'showOtherOption', false);
          }
          answer.splice(answer.indexOf(option.key), 1);
        }
        this.isShowItemForm(index);
        this._saveDraft(index);
      }
    },
    //性别选择
    onSexChange(val, index) {
      //let formItem = {}
      let cIndex = -1;
      let cIn = val[0] == '男' ? 0 : val[0] == '女' ? 1 : -1;
      for (let i = 0; i < this.formList.length; i++) {
        if (this.formList[i].type == 5) {
          this.formList[i].value = val[0];
          cIndex = i;
          //formItem = this.formList[i]
        }
      }
      this.formList[cIndex].optIndex = cIn;
      this.isShowItemForm(cIndex);
      this._saveDraft(index);
    },
    //民族选择
    onNationChange(val, index) {
      for (let i = 0; i < this.formList.length; i++) {
        if (this.formList[i].type == 13) {
          if (this.formList[i].value != val[0]) { // 防止数据初始化时也保存草稿
            this._saveDraft(index);
          }
          this.formList[i].value = val[0];
          this.formList[i].optIndex = 1;
          this.isShowItemForm(i);
        }
      }
    },
    //点击选择图片
    clickAddPic(index, event) {
      if (this.formList[index].value.images.length > 9) {
        this.$showCjToast({
          text: '图片最多只能传9张',
          type: 'warn',
        });
        return;
      }
      if (this.isWeiXin) {
        wxUtilJs
          .chooseImage({
            count: 9, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'] // 可以指定来源是相册还是相机，默认二者都有
          })
          .then(localIds => {
            this.$loading.show({
              text: '上传中...'
            });
            serverIdImgArr = [];
            //获取剩余能传多少张图片，若已选的图片数量大于剩余数。则只传剩余数量的图片
            let residueLength = 9 - this.formList[index].value.images.length;
            if (localIds.length > residueLength) {
              localIds.length = residueLength;
            }
            this.wxUploadImg(localIds, localIds.length - 1, index);
          });
      } else {
        utilJs.imgUpload(
          event.target.files,
          imgData,
          'form',
          res => {
            this.formList[index].value.images.push(res);
            this._saveDraft(index);
          },
          fRes => { }
        );
      }
    },
    //上传图片到微信-----IOS不能一次性传多张，只好递归传
    wxUploadImg(localIds, localIdsLength, index) {
      wxUtilJs
        .uploadImage(
          {
            localId: localIds[localIdsLength]
          },
          true
        )
        .then(res => {
          serverIdImgArr.push(res);
          if (localIdsLength > 0) {
            this.wxUploadImg(localIds, --localIdsLength, index);
          } else {
            this.syncUploadPic(serverIdImgArr, index);
          }
        });
    },

    //上传图片到服务器
    syncUploadPic(serverIdArr, index) {
      utilJs.postMethod(
        global.apiurl + 'common/forms/wxUploadImg',
        {
          serverId: JSON.stringify(serverIdArr),
          mediaType: 2
        },
        res => {
          this.$loading.hide();
          for (let key of res) {
            if (this.formList[index].value.images.length >= 9) {
              break;
            }
            this.formList[index].value.images.push(key);
          }
          this._saveDraft(index);
        },
        failRes => {
          this.$loading.hide();
        }
      );
    },
    //删除上传的图片
    delUploadImage(index, imgIndex) {
      this.formList[index].value.images.splice(imgIndex, 1);
      this._saveDraft(index);
    },
    //点击图片放大预览
    clickPreviewImage(index, imgUrl) {
      if (!imgUrl) {
        return;
      }
      let imgArr = [];
      for (let key of this.formList[index].value.images) {
        imgArr.push(key);
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgArr // 需要预览的图片http链接列表
      });
    },
    bindMobileSuccess() {
      getBindPhoneSetting(global.ckFrom.form).then(res => {
        this.bindPhoneSetting = res;
        this.closeModal();
      });
    },
    closeModal(e) {
      this.showBindPhone = false;
    },
    confirmSubmitForm() {
      this.$cjConfirm({
        title: '提示',
        message: '确认提交修改结果？你的修改将会替代之前填写的结果。',
        onConfirm:() => {
          this.submitForm();
        }
      })
    },
    //表单验证
    checkForm() {
      if (isLoading) {
        return;
      }
      if (this.isSubmitForm) {
        return;
      }
      if (this.bindPhoneSetting && this.bindPhoneSetting.getBind) {
        // this.$routerGo(this, 'push', {
        //   path: '/homePage/login/bindMobile'
        // });
        if (utilJs.goBindMobile()) return;
      }
      let isCheckCode = 0; //是否验证验证码
      let that = this;
      for (let i = 0; i < that.formList.length; i++) {
        // 检查是否有恶意输入<script>标签
        if (typeof (this.formList[i].value) == "string") {
          this.formList[i].value = utilJs.checkScriptStr(this.formList[i].value)
        }
        if (this.formList[i].require == 1 && (this.formList[i].showForm == 1 || this.formList[i].isSkip == 1) && this.formList[i].isChangeHid != 2) {
          if (this.formList[i].type == 2 && this.formList[i].value && this.formList[i].value.length > 20) {
            this.$showCjToast({
              text: `请输入正确的微信号`,
              type: 'warn',
            });
            return;
          }
          if (this.formList[i].type == 3 && this.formList[i].value) {
            if (!utilJs.isFormIntegerNumber(this.formList[i].value)) {
              this.$showCjToast({
                text: `请输入正确的年龄，年龄值须为整数`,
                type: 'warn',
              });
              return;
            }
            if (Number(this.formList[i].value) > 150 || Number(this.formList[i].value) < 1 || Number(this.formList[i].value).toString() == 'NaN') {
              this.$showCjToast({
                text: `请输入正确的年龄，年龄值在1到150内`,
                type: 'warn',
              });
              return;
            }
          }
          console.log('this.formList[i].isDataValidate', this.formList[i].type, this.formList[i].isDataValidate, this.formList[i].value)
          if (this.formList[i].type == 12 && this.formList[i].value && this.formList[i].isDataValidate == 1) {
            if (!utilJs.NumberAndLetters(this.formList[i].value)) {
              this.$showCjToast({
                text: `请输入正确的身份证号码`,
                type: 'warn',
              });
              return;
            } else if (this.formList[i].value.length != 18) {
              this.$showCjToast({
                text: '请输入18位的身份证号码号',
                type: 'warn',
              });
              return;
            }
          }

          if (this.formList[i].type == 4 ) {
            if (this.formList[i].isDataValidate == 1 && !utilJs.isFormIntegerNumber(this.formList[i].value)) {
              this.$showCjToast({
                text: `请输入正确的手机号`,
                type: 'warn',
              });
              return;
            } else if (this.formList[i].isDataValidate == 1 && (this.formList[i].value.length != 11)) {
              this.$showCjToast({
                text: '请输入正确的手机号',
                type: 'warn',
              });
              return;
            } else if (this.formList[i].isCheckTel == 1 && this.code == '') {
              this.$showCjToast({
                text: '请输入验证码',
                type: 'warn',
              });
              return;
            } else if (this.mobilePhone != this.formList[i].value && this.formList[i].isCheckTel == 1) {
              this.$showCjToast({
                text: '获取验证码',
                type: 'warn',
              });
              return;
            } else if (this.formList[i].isCheckTel == 1) {
              isCheckCode = 1;
            }
          } else if (this.formList[i].type == 19) {
            if (!utilJs.isEmail(this.formList[i].value)) {
              this.$showCjToast({
                text: `请输入正确的邮箱`,
                type: 'warn',
              });
              return;
            }
          } else if (this.formList[i].type == 18 && this.formList[i].value.video == '') {
            this.$showCjToast({
              text: '请上传视频',
              type: 'warn',
            });
            return;
          } else if (this.formList[i].type == 9) {
            const temp = this.formList[i].bankList.filter(el => !el.value)
            if (temp.length > 0) {
              this.$showCjToast({
              text: '请完成表单',
              type: 'warn',
            });
            return;
            }

          } else if (
            (this.formList[i].type == 11 && this.formList[i].value.images.length == 0) ||
            (this.formList[i].type != 17 && this.formList[i].type != 11 && this.formList[i].type != 6 && this.formList[i].value == '')
          ) {
            this.$showCjToast({
              text: '请完成表单',
              type: 'warn',
            });
            return;
          } else if (this.formList[i].type == 6) {
            if (this.formList[i].detailType == 1 && (this.formList[i].value == '' || this.formList[i].value2 == '')) {
              this.$showCjToast({
                text: '请完成表单',
                type: 'warn',
              });
              return;
            } else if (this.formList[i].detailType == 2 && this.formList[i].value2 == '') {
              this.$showCjToast({
                text: '请完成表单',
                type: 'warn',
              });
              return;
            }
          }
        }

        //多选单选 其他选项输入框
        if (
          (this.formList[i].showForm == 1 || this.formList[i].isSkip == 1) &&
          this.formList[i].isChangeHid != 2 &&
          this.formList[i].type == 8 &&
          this.formList[i].isOtherOption == 1 &&
          this.formList[i].showOtherOption &&
          this.formList[i].otherOption == ''
        ) {
          this.$showCjToast({
            text: `请输入“其他”项的内容`,
            type: 'warn',
          });
          return;
        }
      }

      if (!this.isCheckAgreement) {
        this.isGreeClick = true;
        this.isShake = true;
        setTimeout(() => {
          this.isShake = false;
        }, 800);
        return
      }
      if (isCheckCode == 1) {
        utilJs.postMethod(global.apiurl + 'k12/forms/checkCode', { mobile: that.mobilePhone, code: that.code }, function (res) {
          that.submitForm();
        });
      } else if (this.formInfo && this.formInfo.logId && this.formInfo.type == 2) { // 调研表单更新时需要提醒用户是否覆盖
        that.confirmSubmitForm();
      } else {
        that.submitForm();
      }
    },
    //提交表单
    submitForm() {
      let item6 = this.formList.find(item => item.type == 6);
      if (item6) {
        item6.value2 = this.addressVal2 || item6.value2;
        item6.value3 = this.addressId2 || item6.value3;
      }
      let stayTime = (new Date().getTime() - startTimeTmp) / 1000; //统计提交用时
      let data = {
        // fId: this.fId,
        content: this.formList,
        duration: stayTime,
        isSubmitForm: this.isSubmitForm
      };
      this.$emit('submitForm', data);
    },
    // 增加浏览数
    /* visitCount() {
      let data = {
        fId: this.fId, //表单ID
      }
      utilJs.postMethod(global.apiurl + 'k12/forms/incrClicks', data, function (res) { });
    }, */
    //IOS微信6.7以上版本会导致输入法收起的时候，键盘没收起，需要手动滚下屏幕
    inputFocus() {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        inputScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      }
    },
    inputBlur(item, index) {
      if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        setTimeout(() => {
          document.body.scrollTop = inputScrollTop - 1 || 0;
        });
      }
      this._saveDraft(index);
    },
    inputCheck(item) {
      if (item.type == 3 && item.value.length > 3) {
        item.value = item.value.substr(0, 3);
      }
      if (item.type == 12) {
        item.value = item.value.replace(/[^\w\/]/gi, '');
      }
    }
  },
  deactivated() {}
};
</script>

<style scoped>
textarea {
  resize: none;
}
.choose {
  display: none;
}
.choose + span {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  line-height: 0.7rem;
  border: solid 1px #999;
  border-radius: 50%;
  vertical-align: middle;
}
.choose:checked + span {
  color: #fff;
  background-color: #ff7225;
  position: relative;
  border: solid 1px #ff7225;
}
.choose:checked + span::after {
  content: "";
  position: absolute;
  left: 0.14rem;
  top: 0.17rem;
  width: 60%;
  height: 35%;
  border: 2px solid #fff;
  border-radius: 1px;
  border-top: none;
  border-right: none;
  background: transparent;
  transform: rotate(-45deg);
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #ccc;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #ccc;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #ccc;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #ccc;
}
.chooseSex /deep/ .weui-cell,
.form-address /deep/ .weui-cell {
  width: 100%;
}
.chooseSex /deep/ .vux-popup-picker-placeholder {
  color: #ccc;
}
.chooseSex /deep/ .vux-popup-picker-select {
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.chooseSex /deep/ .vux-popup-picker-select-box {
  width: 98%;
}
.form-address /deep/ .vux-cell-placeholder {
  color: #ccc;
}
.form-address /deep/ .vux-popup-picker-placeholder {
  color: #ccc;
}
.del-img {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  cursor: pointer;
  font-size: 0.4rem;
  background-color: #ffa95d;
  border-radius: 50%;
  border: 2px solid #fff;
  width: 0.9rem;
  height: 0.9rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.upload-bg {
  background-color: #ecedee;
}
input:disabled,
textarea:disabled {
  color: #666;
}
.short-answer-textarea /deep/ .weui-cell {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.short-answer-textarea /deep/ textarea {
  background-color: #fafafa;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.input-style {
  background-color: #fafafa;
  border: solid 1px #eeeeee;
}
.mt2 {
  margin-top: 0.03rem;
}
.bg-fa {
  background-color: #fafafa;
}
.check-trans {
  transform: scale(0.8);
  display: block;
  line-height: 0.6rem;
}
#vux-datetime-dxg66 .weui-cell__ft {
  text-align: left !important;
}
.v-transfer-dom /deep/ .scroller-content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.textareaClass /deep/ textarea {
  resize: none;
  height: 2.5rem;
}
input:disabled, textarea:disabled{
  color: #ccc!important;
}
/* 同意勾选的气泡 */
.bubble{
  position: absolute;
  top: -1.3rem;
  left: 0;
  height: 1rem;
  width: 4.1rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: 0.45rem;
  color: #fff;
  font-style: normal;
  text-align: center;
  display: block;
}
.bubble:after {
  content: "";
  position: absolute;
  top: 1rem;
  left: 5%;
  display: block;
  width: 0;
  height: 0;
  border-left: 0.13rem solid transparent;
  border-right: 0.13rem solid transparent;
  border-top: 0.24rem solid rgba(0, 0, 0, 0.5);
}

/* 动画定义 */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(5px); }
}

/* 触发动画 */
.shake {
  animation: shake 0.5s;
}
</style>
